<script setup>

import img1 from '../../static/image/img/2130@2x.png'
import img2 from '../../static/image/img/2165@2x.png'
import img3 from '../../static/image/img/2131@2x.png'
import img4 from '../../static/image/img/Right@2x.png'
import img5 from '../../static/image/img/2172@2x.png'
import img6 from '../../static/image/img/2172@2x.png'
import { onMounted } from 'vue';

onMounted(() => {
  setTimeout(() => {
    uni.navigateTo({
      url: '/pages/page.two/three', // 替换为正确路径
      success: () => console.log('跳转成功'),
      fail: (err) => console.error('跳转失败原因：', err)
    });
  }, 5000);
});
</script>

<template>
  <view id="textA">

  </view>
  <view id="TEXT">
    <view id="b1">
      <view id="textB">
        <image class="img1" :src="img1"></image>
        <text class="text">
          当前请假审批已通过。24点后将关闭进出权限。进
        </text>
      </view>
      <view id="texc">
        <view id="kuang1">
          <text class="text1">
           苏少凡 提交的请假<br>
            <text id="a1">软件学院</text>
          </text>
          <text class="text2">
          </text>
          <image class="img2" :src="img2"></image>

        </view>
        <hr>
        <view id="kuang2">
          <text class="text3">
            所在年级：2024级

          </text>
          <text class="text4">
            所在专业：软件工程

          </text>
          <text class="text5">
            所在班级：24130425

          </text>
        </view>
      </view>
      <view id="textD">
        <view id="textE">
          <text class="text6">
            请假时长：1天
          </text>
          <image class="img3" :src="img3">

          </image>
          <text id="text7">
            2025-09-16 00:00
          </text>
          <text id="text8">
            2025-09-17 00:00
          </text>
        </view>
        <hr>
        <view id="textF">
          <text id="text9">
            请假事由
          </text>
          <text id="text10">
            跟女朋友出门旅游，请假出去玩几天
          </text>
        </view>
        <hr>
        <view id="textG">
          <text id="text11">
            本月已经累计请假1次，本年累计请假1次
          </text>
          <text id="text12">
            查看详情
          </text>
          <image class="img4" :src="img4"></image>
        </view>
      </view>
      <view id="textH">
        <view>
          <view id="textI">
            <text id="text13">
              申请详情
            </text>
            <text id="text14">
              是否离开山西：是
            </text>
            <text id="text15">
              请假类型：找亲人
            </text>
          </view>
          <view id="textJ">
            <text id="text16">
              离校目的地 1
            </text>
            <image class="img5" :src="img5"></image>
            <text id="text17">
              山西省吕梁市岚县<br>
              东村镇赵朝舍村
            </text>
          </view>
          <view id="textK">
            <text id="text18">
              离校目的地 2
            </text>
            <image class="img6" :src="img6"></image>
            <text id="text19">
              山西省吕梁市离石区<br>
              离石区莲花街道办
            </text>
          </view>
        </view>
      </view>
      <view id="textL">
        <text id="text20">
          附件
        </text>
      </view>
      <view id="textM">
        <view id="textN">
          <text id="text21">紧急联络</text>
        </view>
        <view id="textO">
          <text id="text22">本人联系电话：15330005030</text>
        </view>
        <view id="textP">
          <text id="text23">紧急联系人姓名：张三</text>
        </view>
        <view id="textQ">
          <text id="text24">紧急联系人电话：13800000000</text>
        </view>
      </view>

      <view id="background">
        <view id="h1">
          <view id="text25">
            请假流程
          </view>
          <view id="h1_1">
            <view id="decoration">
              <view id="smallCircle"></view>
              <view id="line"></view>
            </view>
            <view>
              <view id="firstPerson">
                <view id="personInformation">
                  审批人(导师)
                  <view id="name">
                    张三
                  </view>
                </view>
                <view id="surname">
                  张
                </view>
              </view>
              <view id="line_1">
                会签------------------------1人通过即可进入下一节点
              </view>
              <view id="otherPerson">
                <view id="personInformation">
                  审批人(导师)
                  <view id="name">
                    王五
                  </view>
                </view>
                <view id="surname">
                  王
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view id="textR">
        <text id="text26">
          撤销申请
        </text>
      </view>
    </view>
  </view>
</template>

<style scoped>
#TEXT {
  display: flex;
  justify-content: center;
  width: 100%;
  height: 1600px;
  background: #f5f5f5;
}

#textA {
  width: 100%;
  height: 81px;
  background: linear-gradient(180.00deg, #2264ff 0%, #f5f5f5 100%);
  display: flex;
  justify-content: center;
}

#b1 {
  margin-top: -50px;
}

#textB {
  margin-left: 30px;
  width: 85%;
  height: 39px;
  border-radius: 12px 12px 0 0;
  background: #fffae7;
  margin-top: 10px;
  display: flex;
  justify-content: center;

}

.text {
  font-weight: 400;
  font-size: 12px;
  text-align: left;
  color: #313133;
  padding: 6px;

}

.img1 {
  width: 15px;
  height: 15px;
  background: transparent;
  margin-top: 8px;
}


#texc {
  width: 90%;
  height: 157px;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 2px 4px #e6e6e64d;
  margin-top: -16px;
  margin-left: 5%;
  margin-right: 5%;
  z-index: 10000;
}

.text1 {
  font-weight: 700;
  font-size: 18px;
  text-align: left;
  width: 200px;
  color: #1a1a1a;
  margin-top: 10px;
  margin-left: 20px;
}

.text2 {
  font-weight: 400;
  font-size: 13px;
  text-align: left;
  color: #808080;
  margin-left: -148px;
  margin-top: 40px;
}

#a1 {
  height: 20px;
  width: 40px;
  font-size: 12px;
  color: #808080;
  font-weight: 400;
}

.img2 {
  width: 70px;
  height: 70px;
  background: transparent;
  margin-left: 220px;
  margin-top: 8px;
}

.hr {
  width: 312px;
  height: 0;
  background: transparent;
  border: 0.5px solid #dbdbdb;
}

#kuang1 {
  width: 100%;
  height: 80px;
  display: flex;

}

#kuang2 {
  width: 100%;
  height: 77px;
  display: flex;
}

.text3 {
  font-weight: 400;
  font-size: 13px;
  text-align: left;
  color: #808080;
  margin-left: 20px;
  margin-top: 10px;
}

.text4 {
  font-weight: 400;
  font-size: 13px;
  text-align: left;
  color: #808080;
  margin-left: -107px;
  margin-top: 30px;
}

.text5 {
  font-weight: 400;
  font-size: 13px;
  text-align: left;
  color: #808080;
  margin-left: -117px;
  margin-top: 50px;
}

#textD {
  width: 90%;
  height: 230px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 2px 4px #e6e6e64d;
  margin-left: 5%;
  margin-right: 5%;
  z-index: 10000;
  margin-top: 10px;
}

#textE {
  width: 100%;
  height: 100px;
  display: flex;
}

.text6 {
  font-weight: 700;
  font-size: 16px;
  text-align: left;
  color: #1a1a1a;
  margin-top: 8px;
  margin-left: 16px;
}

.img3 {
  width: 9px;
  height: 35px;
  margin-left: -100px;
  margin-top: 42px;
}

#text7 {
  font-weight: 700;
  font-size: 12px;
  text-align: left;
  color: #1a1a1a;
  margin-top: 36px;
  margin-left: 17px;
}

#text8 {
  font-weight: 700;
  font-size: 12px;
  text-align: left;
  color: #1a1a1a;
  margin-top: 63px;
  margin-left: -101px;
}

#hr {
  width: 312px;
  height: 0;
  background: transparent;
  border: 0.5px solid #dbdbdb;
}

#textF {
  width: 100%;
  height: 77px;
  display: flex;

}

#text9 {
  font-weight: 400;
  font-size: 14px;
  text-align: left;
  color: #808080;
  margin-left: 15px;
  margin-top: 10px;
}

#text10 {
  font-weight: 700;
  font-size: 16px;
  text-align: left;
  color: #1a1a1a;
  margin-top: 36px;
  margin-left: -56px;
}

#hr {
  width: 343px;
  height: 0;
  background: transparent;
  border: 0.5px solid #dbdbdb;
}

#textG {
  width: 100%;
  height: 70px;
  display: flex;
}

#text11 {
  font-weight: 400;
  font-size: 12px;
  text-align: left;
  color: #000;
  margin-left: 13px;
  margin-top: 12px;
}

#text12 {
  font-weight: 400;
  font-size: 12px;
  text-align: right;
  color: #808080;
  margin-left: 27px;
  margin-top: 12px;
}

.img4 {
  width: 15px;
  height: 20px;
  background: #ffffff;
  margin-top: 13px;
  margin-left: 5px;
}

#textH {
  width: 90%;
  height: 337px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 2px 4px #e6e6e64d;
  margin-top: 10px;
  display: flex;
  margin-left: 20px;
  justify-content: center;
}

#text13 {
  font-weight: 400;
  font-size: 14px;
  text-align: left;
  color: #808080;
  margin-left: 20px;
  margin-top: 10px;
}

#text14 {
  font-weight: 400;
  font-size: 16px;
  text-align: left;
  color: #1a1a1a;
  margin-top: 33px;
  margin-left: -57px;
}

#text15 {
  font-weight: 400;
  font-size: 16px;
  text-align: left;
  color: #1a1a1a;
  margin-top: 60px;
  margin-left: -129px;
}

#textI {
  width: 100%;
  height: 70px;
  display: flex;
}

#textJ {
  width: 90%;
  height: 100px;
  border-radius: 8px;
  background: #fff;
  margin-left: 15px;
  margin-top: 20px;
  border: 1px solid #e6e6e6;
  display: flex;
}

#text16 {
  font-weight: 400;
  font-size: 14px;
  text-align: left;
  color: #808080;
  margin-left: 11px;
  margin-top: 3px;
  width: 85px;
  height: 10px;
}

.img5 {
  width: 18px;
  height: 18px;
  background: transparent;
  margin-top: 31px;
  margin-left: -78px;
}

#text17 {
  width: 285px;
  height: 48px;
  font-weight: 400;
  font-size: 16px;
  text-align: left;
  color: #1a1a1a;
  margin-top: 27px;
  margin-left: 10px;;
}

#textK {
  width: 90%;
  height: 100px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid #e6e6e6;
  margin-left: 15px;
  margin-top: 20px;
  display: flex;
}

#text18 {
  font-weight: 400;
  font-size: 14px;
  text-align: left;
  color: #808080;
  margin-left: 11px;
  margin-top: 3px;
  width: 85px;
  height: 10px;
}

#text19 {
  width: 285px;
  height: 48px;
  font-weight: 400;
  font-size: 16px;
  text-align: left;
  color: #1a1a1a;
  margin-top: 27px;
  margin-left: 10px;
}

.img6 {
  width: 18px;
  height: 18px;
  background: transparent;
  margin-top: 31px;
  margin-left: -78px;
}

#textL {
  width: 90%;
  height: 130px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 2px 4px #e6e6e64d;
  margin-left: 5%;
  margin-right: 5%;
  margin-top: 10px;
  display: flex;
}

#text20 {
  font-weight: 400;
  font-size: 15px;
  text-align: left;
  color: #808080;
  margin-left: 19px;
  margin-top: 10px;
}

#textM {
  width: 90%;
  height: 160px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 2px 4px #e6e6e64d;
  margin-left: 5%;
  margin-right: 5%;
  margin-top: 10px;
}

#text21 {
  font-weight: 400;
  font-size: 15px;
  text-align: left;
  color: #808080;
  margin-top: 10px;
  margin-left: 17px;
}

#text22 {
  font-weight: 400;
  font-size: 16px;
  text-align: left;
  color: #1a1a1a;
  margin-top: 13px;
  margin-left: 17px;
}

#text23 {
  font-weight: 400;
  font-size: 16px;
  text-align: left;
  color: #1a1a1a;
  margin-top: 13px;
  margin-left: 17px;
}

#text24 {
  font-weight: 400;
  font-size: 16px;
  text-align: left;
  color: #1a1a1a;
  margin-top: 13px;
  margin-left: 17px;
}

#textN {
  width: 100%;
  height: 30px;
  display: flex;
}

#textO {
  width: 100%;
  height: 30px;
  display: flex;
}

#textP {
  width: 100%;
  height: 30px;
  display: flex;
}

#textQ {
  width: 100%;
  height: 30px;
  display: flex;
}

#background {
  display: flex;
  width: 90%;
  height: 330px;
  border-radius: 12px;
  box-shadow: 0 2px 4px #e6e6e6;
  background-color: #fff;
  margin-top: 10px;
  margin-left: 5%;
  margin-right: 5%;

}

#h1_1 {
  display: flex;
}

#smallCircle {
  margin-top: 10px;
  margin-left: 15px;
  width: 6px;
  height: 6px;
  border-radius: 6px;
  background: #fff;
  border: 4px solid #2264ff;
}

#line {
  margin-left: 21px;
  margin-top: 10px;
  width: 0;
  height: 230px;
  background: transparent;
  border: 0.5px solid #2264ff;
}

#firstPerson {
  margin-left: 20px;
  margin-top: 15px;
  width: 300px;
  height: 80px;
  display: flex;
  justify-content: space-between;
}

#name {
  font-weight: 400;
  font-size: 15px;
  text-align: left;
  color: #808080;
}

#surname {
  color: #f8f8f8;
  width: 58px;
  height: 58px;
  border-radius: 58px;
  text-align: center;
  font-size: 35px;
  background: #2264ff;
  margin-right: 30px
}

#line_1 {
  color: #8f939c;
  font-size: 13px;
  margin-left: 10px;
  margin-top: 10px;
}

#otherPerson {
  margin-top: 60px;
  margin-left: 20px;
  width: 300px;
  height: 80px;
  display: flex;
  justify-content: space-between;
}

#text25 {
  margin-top: 10px;
  margin-left: 15px;
}

#textR {
  width: 70%;
  height: 60px;
  border-radius: 25px;
  background: #2264ff;
  display: flex;
  margin-top: 17px;
  margin-left: 15%;
  margin-right: 15%;
}

#text26 {
  font-weight: 700;
  font-size: 18px;
  text-align: center;
  margin-left: 95px;
  margin-top: 16px;
  color: #fff;
}

</style>